<template>
    <div>
        {{ num }}
        {{ obj.name }}
        {{ obj.info.age }}
    </div>
</template>

<script setup>
import { ref, watch, reactive } from 'vue';
const num = ref(0)
const obj = reactive({
    name: "wjk",
    info: {
        age: 18
    }
})
// 监听单个数据
// 语法:watch(要监听的数据,改变后的函数)
// watch(num,()=>{
//     console.log('监听单个数据');
// })
// 监听多个数据
// 语法:watch([第一个要监听的数据，第二个要监听的数据,...],改变后的函数)
// watch([num, obj], () => {
//     console.log('监听多个数据');
// })
// 监听对象其中一个属性
// 语法:watch(()=>obj.name,改变后的函数)
// watch(() => obj.name, () => {
//     console.log('监听对象其中一个属性');
// })

// 深度监听
// 语法：watch(要监听的复杂数据类型，改变后的函数，{开启深度监听})
watch(obj.info,()=>{
    console.log('深度监听');
},{deep:true,immediate:true})

setTimeout(() => {
    num.value++
}, 2000)
setTimeout(() => {
    obj.name = 'hh'
}, 3000)
setTimeout(() => {
    obj.info.age++
}, 4000)
</script>

<style  scoped>

</style>